<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-alert-bar type="primary" :visible="true"
          >this is <a>primary</a> bar</ph-alert-bar
        >
        <ph-alert-bar
          type="success"
          :visible="v1"
          :closable="c1"
          @close="v1 = false"
          >this is <a>success</a> bar</ph-alert-bar
        >
        <ph-alert-bar type="info" :visible="true"
          >this is <a>info</a> bar</ph-alert-bar
        >
        <ph-alert-bar
          type="warning"
          :visible="v2"
          :closable="c2"
          @close="v2 = false"
          >this is <a>warning</a> bar</ph-alert-bar
        >
        <ph-alert-bar type="danger" :visible="true"
          >this is <a>danger</a> bar</ph-alert-bar
        >
        <ph-pretty>{{ demo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { PhAlertBar, PhTab, PhTabPanel, PhView } from "@/index";
import * as Data from "../data/alert-box";
export default defineComponent({
  components: { PhAlertBar, PhTab, PhTabPanel, PhView },
  setup() {
    const data = reactive({
      c1: true,
      c2: true,
      v1: true,
      v2: true,
    });
    return {
      ...toRefs(data),
      ...Data,
    };
  },
});
</script>
